
<template>
  <div class='bgff h100 pd pt10 dfgfdgtrt'>
    <p class="title-label">组局管理</p>

    <div class="mt20 sdfgdgdfyt">
      <n-form ref="formRef" :model="form" :rules="rules" label-placement="left" label-width="120px"
        require-mark-placement="right-hanging" size="medium" :style="{
        }">
        <n-grid :cols="24" :x-gap="20">
          <n-form-item-gi span="24" label="标题:" path="title">
            <n-input v-model:value="form.title" type="text" placeholder="请输入标题" size="medium" clearable></n-input>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="轮播图:">
            <div class="dfdsrexert">
              <div class="logo-context vertical-center pr " v-for="(item, idx) in banner">
                <img :src="item" class="w100 h100 imgjz">
                <i class="iconfont dx-closefill sdfddfsrtxer" @click="dlkssdd(idx)"></i>
              </div>
              <div class="logo-context vertical-center pr " @click="photoShowModal = true">
                <span>点击上传banner</span>
              </div>
            </div>
          </n-form-item-gi>
          <n-form-item-gi span="12" label="场地">
            <n-input v-model:value="form.site" type="text" placeholder="请输入场地" size="medium" clearable></n-input>
          </n-form-item-gi>
          <n-form-item-gi span="12" label="主题">
            <n-input v-model:value="form.theme" type="text" placeholder="请输入主题" size="medium" clearable></n-input>
          </n-form-item-gi>
    

          <n-form-item-gi span="12" label="开始时间:">
            <div>
              <n-time-picker v-model:value="form.startTime" />
            </div>
          </n-form-item-gi>
          <n-form-item-gi span="12" label="结束时间:">
            <div>
              <n-time-picker v-model:value="form.endTime" />
            </div>
          </n-form-item-gi>

          <n-form-item-gi span="24" label="地址:" path="jwd">
            <n-select v-model:value="form.jwd" filterable placeholder="请输入组局地址" :options="mapList" :loading="loading"
              clearable remote :clear-filter-after-select="false" @search="handleSearch" @change="slksrxe" />
          </n-form-item-gi>

          <n-form-item-gi span="12" label="工作日费用:" path="WorkingDayRate">
            <div class=" display-flex">
              <div class=" flex-1">
                <n-input v-model:value="form.WorkingDayRate" type="text" placeholder="工作日费用" size="medium"
                  clearable></n-input>
              </div>
              <div class=" vertical-center ml10">
                /位
              </div>
            </div>
          </n-form-item-gi>
          <n-form-item-gi span="12" label="节假日费用:" path="HolidayExpenses">
            <div class=" display-flex">
              <div class=" flex-1">
                <n-input v-model:value="form.HolidayExpenses" type="text" placeholder="节假日费用" size="medium"
                  clearable></n-input>
              </div>
              <div class=" vertical-center ml10">
                /位
              </div>
            </div>
          </n-form-item-gi>
          <n-form-item-gi span="12" label="组局分类">
            <n-select v-model:value="form.classify" size="medium" :options="fllist" clearable />
            
          </n-form-item-gi>
          <n-form-item-gi span="24" label="活动须知:" path="ActivityIntroduction">
            <n-input type="textarea" rows="10" v-model:value="form.ActivityIntroduction" />
          </n-form-item-gi>
          <n-form-item-gi span="24" label="用户须知:" path="UserNotice">
            <n-input type="textarea" rows="10" v-model:value="form.UserNotice" />
          </n-form-item-gi>
          <n-form-item-gi span="24" label="&nbsp;" class="mt20 pm20">
            <n-button type="primary" :loading="baozd" size="medium" @click="baocun">保存</n-button>
            <n-button size="medium" class="ml20" @click="callBack">返回上一页</n-button>
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </div>



  </div>

  <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
    <template #header>
      <div>组局轮播图</div>
    </template>
    <div>
      <photoGallery @getImg="getImg" types="组局轮播图"></photoGallery>
    </div>
    <template #action>
      <div class="tr">
        <n-button @click="photoShowModal = false"> 取消 </n-button>
        <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
      </div>
    </template>
  </n-modal>
</template>
<script lang='ts' setup>
import { ref, nextTick } from "vue"
import { dxget, dxpost, callBack, qurl } from "../../util/index";
import photoGallery from "../../components/util/photoGallery";
import tinymce from "../../components/util/tinymce.vue"
const apiUrl = "yuyue/bureauFormation"
const photoShowModal = ref(false)
const banner = ref([])
const xzcerty = ref()
const jxsd = ref()
const mapList = ref([])
const loading = ref(false)
const formRef = ref()
const baozd = ref(false)
const cz = qurl()
const isbj = ref(false)
const fllist = ref([])
if (cz.id) {
  isbj.value = true
}
const form = ref({
  title: "",//标题
  banner: "",//banner
  site:"", // 场地
  theme:"",//主题
  classify:"",//分类
  startTime: new Date().getTime(),//开始时间
  endTime: new Date().getTime() + (1000 * 60 * 60 * 4),//结束时间
  Locations: "", //地点
  city: "",
  jwd: "",//经纬
  WorkingDayRate: "",//工作日费用
  HolidayExpenses: "",//节假日费用
  ActivityIntroduction: "",//活动介绍
  UserNotice: ""//用户须知
})

const rules = {
  title: {
    required: true,
    message: '请输入标题',
    trigger: 'blur'
  }, jwd: {
    required: true,
    message: '请输入活动地址',
    trigger: 'blur'
  }, 
  site: {
    required: true,
    message: '请输入活动场地',
    trigger: 'blur'
  }, theme: {
    required: true,
    message: '请输入活动主题',
    trigger: 'blur'
  }, 
  classify: {
    required: true,
    message: '请选择组局分类',
    trigger: 'blur'
  }, 
  
  
  ActivityIntroduction: {
    required: true,
    message: '请输入活动介绍',
    trigger: 'blur'
  }, UserNotice: {
    required: true,
    message: '请输入用户须知',
    trigger: 'blur'
  },
}

const initData = async () => {

  const { data }: any = await dxget(apiUrl, { id: cz.id })
  await handleSearch(data.Locations)
  form.value = data
  banner.value = data.banner.split(",")
  console.log(banner.value);
}
if (cz.id) {
  initData()
}
let kjsser = ""
const getImg = (data) => {
  kjsser = data
}
const setImg = () => {
  banner.value.push(kjsser)
  photoShowModal.value = false
}
const dlkssdd = (idx) => {
  banner.value.splice(idx, 1)
}

const handleSearch = async (query: string) => {
  console.log(query);
  if (!query.length) {
    mapList.value = []
    return
  }
  loading.value = true
  const { data }: any = await dxget("public/map/geo", {
    address: query
  })
  loading.value = false
  console.log(data);
  mapList.value = data

}
const slksrxe = (a, b) => {
  form.value.Locations = b.label
  form.value.city = b.city
}

const baocun = () => {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      if (banner.value.length <= 0) {
        window.$message.error("请上传轮播图")
        return
      }
      form.value.banner = banner.value.join(",")
      baozd.value = true
      const data = await dxpost(apiUrl, form.value, isbj.value ? 'put' : 'post')
      baozd.value = false
      window.$message.success("操作成功！")
      callBack()
    }
  })
}

const getwnewion = async () => {
  const { data }: any = await dxget("dxgjAdmin/getzd", { name: 'yyzjfl' })
  console.log(data);
  fllist.value = data
}
getwnewion()
</script>
<style scoped>
.sdfgdgdfyt {
  width: 800px;
}

.dfdsrexert {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px
}

.dfgfdgtrt {
  overflow: auto;
  padding-bottom: 100px;
}
</style>